<template>
    <div class="Catcondetial">
        <div class="Catcondetial-title">
            <div class="Catcondetial-title-left">
                <span>我的猫币账单</span>
            </div>
            <div class="Catcondetial-title-right">
                <div class="Catcondetial-title-right-con">
                    <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <span @click="screening">筛选</span>
                </div>
            </div>
        </div>
        <div class="Catcondetial-con">
            <ul>
                <li v-for="(item,index) in CatcondetialList" @click="showModals(index,item.pay_count,item.transaction_type,item.pay_time,item.order_no,item.remarks)" :key="index">
                    <label>
                        <span>{{item.title}}</span>
                        <span>{{item.pay_time}}</span>
                    </label>
                    <label>
                        <span v-if="item.transaction_type" style="font-weight: normal; line-height:50px;">+{{item.pay_count}}猫币</span>
                        <span v-else style="font-weight: normal; line-height:50px;">-{{item.pay_count}}猫币</span>
                    </label>
                   
                </li>
            </ul>
        </div>
         <div class="mask" v-if="showModal" @click="showModal=false"></div>
    </div>
</template>
<script>
export default {
    name:'Catcondetial',
    data(){
        return{
            CatcondetialList:[],
            value1: [new Date(2020, 4, 19, 16, 30), new Date(2020, 4, 5, 16, 30)],
            userinfoa:JSON.parse(localStorage.getItem('userinfo')),
            starttime:'',
            endtime:'',
            showModal: false
        }
    },
    mounted(){
        this.getdetial()
    },
    methods:{
        getdetial(){//获取猫币明细
            if(this.endtime == ''){
                var data={
                    oper_id:this.userinfoa.user_id,
                    pageSize:38,
                    currentPage:1,
                }
            }else{
                var data={
                    oper_id:this.userinfoa.user_id,
                    pageSize:38,
                    end_time:this.endtime,
                    start_time:this.starttime,
                    currentPage:1
                }
            }
            
            this.$axios({
                    method:'get',
                    url:'http://101.37.66.151:8768/eg-api/user/userOrder/queryDetailListPage',
                    params:data,
                }).then((res) =>{
                    this.CatcondetialList = res.data.data.userOrderEntities
                    this.CatcondetialList.forEach(itme => {
                        if(itme.type == 'video'){
                            itme.title = '视频通话'
                        }else if(itme.type == 'login'){
                            itme.title = '登录有礼'
                        }else if(itme.type == 'gift'){
                            if(itme.transaction_type){
                                itme.title = '收到礼物-'+itme.map.userinfo.nick_name+''
                            }else{
                                itme.title = '发送礼物-'+itme.map.userinfo.nick_name+''
                            }
                            
                        }else if(itme.type == 'sign'){
                            itme.title = '签到'
                        }else if(itme.type == 'redenvelopes'){
                            if(itme.transaction_type){
                                itme.title = '收到红包'
                            }else{
                                itme.title = '发送红包'
                            }
                            
                        }else if(itme.type == 'recharge'){
                            itme.title = '充值'
                        }else{
                           itme.title = '其他' 
                        }
                        
                    });
                }).catch((error) =>{
            })
        },
        startdate(datetime){ 
            var d = new Date(datetime); 
            let year = d.getFullYear(); 
            let month = d.getMonth()+1;
            let day = d.getDate(); 
            let hours = d.getHours() 
            let minutes = d.getMinutes()
            let senc= d.getSeconds() 
            month = (month < 10) ? '0' + month : month = month; 
            day = (day < 10) ? '0' + day : day = day; 
            hours = (hours < 10) ? '0' + hours : hours = hours; 
            minutes = (minutes < 10) ? '0' + minutes : minutes = minutes; 
            senc = (senc < 10) ? '0' + senc : senc = senc; 
            var thestarttime = year + '-' + month + '-' + day;
            this.starttime = thestarttime
            return thestarttime

        },
        enddate(datetime){ 
            var d = new Date(datetime); 
            let year = d.getFullYear(); 
            let month = d.getMonth()+1;
            let day = d.getDate(); 
            let hours = d.getHours() 
            let minutes = d.getMinutes()
            let senc= d.getSeconds() 
            month = (month < 10) ? '0' + month : month = month; 
            day = (day < 10) ? '0' + day : day = day; 
            hours = (hours < 10) ? '0' + hours : hours = hours; 
            minutes = (minutes < 10) ? '0' + minutes : minutes = minutes; 
            senc = (senc < 10) ? '0' + senc : senc = senc; 
            var thestarttime = year + '-' + month + '-' + day;
            this.endtime = thestarttime
            return thestarttime

        },
        screening(){//筛选
            var starttimer = this.value1[0]
            var emdtimer = this.value1[1]
            this.enddate(emdtimer)
            this.startdate(starttimer)
            this.CatcondetialList=[]
            this.getdetial()
        },
        showModals(index,paycount,transactiontype,paytime,orderno,remarks){
            if(transactiontype){
                transactiontype = '收入'
            }else{
                transactiontype = '支出'
            }
            const h = this.$createElement;
            this.$msgbox({
            title: '详情',
            message: h('ul', null, 
                [
                    h('li', '猫币','i',paycount ),
                    h('li', paycount),
                    h('li', null, '类型'),
                    h('li', transactiontype),
                    h('li', '时间'),
                    h('li', paytime),
                    h('li', '交易单号'),
                    h('li', orderno),
                    h('li', '备注'),
                    h('li', remarks),
                ]),

            })
        }
    }
}
</script>
<style lang="less" scoped>
    .Catcondetial{
        position: relative;
        width: 90%;
        background: #ffffff;
        border-radius: 20px;
    }
    .Catcondetial-title{
        position: relative;
        width: 90%;
        height: 80px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #47CECF;
    }
    .Catcondetial-title-left{
        width: 50%;
        span{
            display: inline-block;
            height: 30px;
            border-left: 10px solid #2DC7C8;
            color: #2DC7C8;
            font-weight: bold;
            font-size: 22px;
            padding-left: 4%;
        }
    }
    .Catcondetial-title-right{
        width: 50%;
    }
    .Catcondetial-title-right-con{
        position: relative;
        width: 100%;
        /deep/.el-range-editor.el-input__inner{
            width: 70%;
            border-radius:20px;
            height: 40px;
            border: 1px solid #47CECF;           
        }
        /deep/.el-date-editor .el-range-input{
            color: #47CECF;
            font-size: 12px;
        }
        /deep/.el-date-editor .el-range-separator{
            color: #47CECF;
            font-size: 12px;
        }
        span{
            display: inline-block;
            width: 22%;
            height: 40px;
            background:rgba(71,206,207,1);
            border-radius:20px;
            text-align: center;
            color: #FFFFFF;
            margin-left: 2%;
            line-height: 40px;
            cursor: pointer;
        }
    }
    /*内容样式*/
    .Catcondetial-con{
        position: relative;
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
        padding-bottom: 100px;
        ul{
            list-style: none;
            width: 100%;
            padding: 0;
            margin-top: 0;
            li{
                display: flex;
                width: 100%;
                height: 60px;
                align-items: center;
                line-height: 60px;
                border-bottom: 1px solid #f1f1f1;
                label{
                    display: inline-block;
                    width: 50%;
                    height: 60px;
                    cursor: pointer;
                    &:last-child{
                        text-align: right;
                        color: #373737;
                        padding-right: 20px;
                        line-height: 80px;
                        span{
                            margin: 0;
                        }
                    }
                    span{
                        display: block;
                        font-size: 12px;
                        color: #C2C2C2;
                        // height: 40px;
                        line-height: 30px;
                        &:first-child{
                            color: #484848;
                            font-weight: bold;
                            font-size: 14px;
                        }
                    }
                   
                }
            }
        }
    }
</style>